<template>
  <view class="contenter">
    <view style="padding-top: 20rpx">

      <view class="u-pd-20 u-flex flex_bt" @click="listShow">
        <view class="name">单人排班</view>
        <view>
          <u-icon  :name="showA?'arrow-down':'arrow-right'"  color="#ACACAC" size="24"></u-icon>
        </view>
      </view>
      <view v-if="showA" class="collapse-item u-flex flex_bt" @click="add(data.id)" v-for="(data,index1) in dataList" :key="index1">
        <view class="u-flex">
          <item-image :type="'1'" :img="data.timg" :size="80"   :fade="false"/>
          <view class="name">
            <view class="u-flex"><text>{{data.name}}</text> </view>
            <view>{{data.phone}}</view>
          </view>
        </view>
        <view>
          <u-icon name="arrow-right"  color="#ACACAC" size="24"></u-icon>
        </view>
      </view>

      <view class="u-pd-20 u-flex flex_bt" @click="schedu(1)">
        <view class="name">批量排班</view>
        <view>
          <u-icon name="arrow-right"  color="#ACACAC" size="24"></u-icon>
        </view>
      </view>
      <view class="u-pd-20 u-flex flex_bt"  @click="scheduAll">
        <view class="name">排班统计</view>
        <view>
          <u-icon name="arrow-right"  color="#ACACAC" size="24"></u-icon>
        </view>
      </view>
    </view>
    <view class="btns u-flex flex_j_c" @click="add('')">
      <u-icon name="plus"  color="#45806E" size="28"></u-icon>
      <view class="u-margin-left-10">新增技师</view>
    </view>

  </view>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      itemList: [{
        head: "单人排班",
        body: "",
        id:2,
      }],
      dataList:[],
      showA:true
    }
  },
  onShow(){
   this.setData()
  },
  methods:{
    //请求技师列表
    setData(){
      this.$api.tecList().then(res => {
        this.dataList = res.data
      })
    },
    //控制列表收起
    listShow(){
      if(this.showA){
        this.showA = false
      }else {
        this.showA = true
      }
    },
    //排班
    schedu(type){
      this.$u.route({
        url:'/pagesA/technicianManagement/Scheduling',
        params:{
          type:type,//1是批量 2是单次
        }
      })
    },
    //排班统计
    scheduAll(){
      this.$u.route({
        url:'/pagesA/technicianManagement/statistics',
      })
    },
    change(){},
    itemChange(){
    },
    //添加技师
    add(id){
      this.$u.route({
        url:'/pagesA/technicianManagement/addTec',
        params:{
          id:id || ''
        }
      })
    },
  },
}
</script>
<style>
/deep/.u-collapse-head{
  height: 85rpx;
  background: white;
  padding-left: 20rpx !important;
}
</style>
<style scoped lang="scss">
.contenter{
  margin:0 32rpx;
}

.btns{
  width: 590rpx;
  height: 78rpx;
  border: 2rpx solid #45806E;
  border-radius: 40rpx;
  text-align: center;
  color:#45806E ;
  line-height: 78rpx;
  position: fixed;
  bottom: 50rpx;
  left: 80rpx;
}
.collapse-item {
  height: 120rpx;
  background: white;
  padding: 0 20rpx;
  border-top: 2rpx solid #f2f2f2;
  .name{
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #4B4B4B;
    view{
    &:last-child{
      margin-top: 10rpx;
    }
  }
    text{
      font-size: 28rpx;
      margin-right: 10rpx;
    }
  }
}
.u-pd-20{
  background: white;
  height: 76rpx;
  margin-top: 20rpx;
}
.name{
  font-size: 28rpx;
  color: #4B4B4B;
}
</style>